<template>
  <comNavigation>
    <template #title>
      <div class="title">
        {{ list?.name }}
      </div>
    </template>
  </comNavigation>
  <div class="father">
    <h2>{{ list?.name }}</h2>
    <span>就诊科室：{{ list?.medicalDepartment }}</span>
  </div>
  <van-tabs v-model:active="active">
    <van-tab title="介绍">
      <div style="padding: 5px;">
        <p v-html="list?.introduction"></p>
      </div>
    </van-tab>
    <van-tab title="症状">
      <div style="padding: 5px;">
        <p v-html="list?.symptom"></p>
      </div>
    </van-tab>
    <van-tab title="诊断">
      <div style="padding: 5px;">
        <p v-html="list?.diagnosis"></p>
      </div>
    </van-tab>
    <van-tab title="治疗">
      <div style="padding: 5px;">
        <p v-html="list?.treatment"></p>
      </div>
    </van-tab>
    <van-tab title="就诊">
      <div style="padding: 5px;">
        <p v-html="list?.medicalConsult"></p>
      </div>
    </van-tab>
  </van-tabs>
</template>


<script setup lang="ts">
import comNavigation from '@/components/common/com-navigationBar/com-navigation.vue'

import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
const route = useRoute()
import { getPatientDiseaseDetailAPI } from '@/api/home'
const list = ref()
const active = ref(0);
onMounted(async () => {
  let res = await getPatientDiseaseDetailAPI(route.query?.id)
  list.value = res.data.data
  console.log(list.value);

})
</script>

<style scoped lang="scss">
.father {
  width: 90%;
  height: 60px;
  padding: 5%;
  border-bottom: 8px solid #fafafa;

  h2 {
    margin: 5px 0;
    padding: 0;
  }

  span {
    font-size: 12px;
    color: #b0b0b0;
  }
}
</style>
